/**
 * Created by yyl on 2018/11/21.
 */

import React,{Component} from 'react'
import Immutable from 'immutable'
import {Modal} from 'antd';




export default class VideoList extends Component{

    constructor(props){
        super(props);
        this.state = {
            visible:false,
            url:"",
            deleteFlag: false,
            _videoDelete: ()=>{

            }
        };
    }

    static defaultProps={
        data:Immutable.List()
    }
    render(){
        const {visible,url} = this.state;

        return      <div className="right-info-pic-info right-info-video-info">
            <div className="clearfix">
                {this._renderItems()}
            </div>
            <Modal
                title="视频播放"
                wrapClassName="vertical-center-modal"
                visible={visible}
                onCancel={this._close}
                footer={null}
            >
                <video id="video" poster={url+ "?vframe/png/offset/1/w/150/h/150&_v=" + new Date().getTime()} className="video" width='100%' height='100%' controls="controls" src={url}></video>
            </Modal>
        </div>

    }


    _renderItems=()=>{
        let data = this.props.data||Immutable.List();
        return data.map((item)=>{

            return <div className="ant-upload-list ant-upload-list-picture-card">
                <div className="ant-upload-list-item ant-upload-list-item-done">
                    <div className="ant-upload-list-item-info">
                        <a className="ant-upload-list-item-thumbnail">
                            <img src={item.get('url')+"?vframe/png/offset/1/w/150/h/150&_v=" + new Date().getTime()} alt="生活照" />
                        </a>
                        <span className="ant-upload-list-item-name" title={item.get('title')||""}>{item.get('title')||""}</span>
                    </div>
                    <span className="ant-upload-list-item-actions" onClick={() => this._showImage(item.get('url'))}>
                        <a title="预览文件"><i className="anticon anticon-play-circle-o"></i></a>
                      {
                        this.props.deleteFlag ? <i title="删除文件" className="anticon anticon-delete" onClick={this._videoDelete}></i> : null
                      }
                    </span>
                </div>
            </div>

        });
    };

    _close = ()=>{
        this.setState({visible:false});
        document.getElementById("video").pause();
    };


    _showImage=(url)=>{
        this.setState({visible:true,url:url});
    };

    _videoDelete =()=>{
        this.props._videoDelete();
    }
}